<template>
  <div class="myboard-container" :style="{ backgroundColor: backColor ? 'rgba(240,240,240,.1)' : '#fff' }">
    <table class="tb-body" cellspacing="0" cellpadding="0">
      <thead style="font-size: 12px">
      <tr>
        <th class="bt-time" style="padding-left: 28px">
          <button
            class="bt-time-button"
            style="margin-right: 3px; margin-left: 0;"
            type="text"
          >
          向上
          </button>
        </th>
        <template v-if="boardType === 'week'">
          <th v-for="(item,) in dayArr" :key="item">
            <div style="display: flex; align-items: center;justify-content: center;">
              {{ item }}
              
              <!-- <img v-else src="@/assets/images/today.png" alt="" style="width: 28px;height: 16px;margin-left: 4px"> -->
            </div>
          </th>
        </template>
        <th class="bt-time" style="padding-left: 28px">
          <button
            class="bt-time-button"
            style="margin-right: 38px"
            type="text"
          >
          向下
          </button>
        </th>
      </tr>
      </thead>
    </table>
    <div id="boardPickArea"  class="board-area">
      <div v-if="timeArr.length" ref="myBoardPanel" id="myBoardPanel" class="board-area-panel">
        <div v-for="(item, index) in timeArr" :key="index" class="board-area-panel-box">
          <div class="board-time-box">
            <div class="board-timer-wrap" :style="{ height: minorUnit ? '72px' : '56px'}">
              <div class="board-hour-box" :class="['board-timer','board-timer--hour', 'rb-none', 'lb-none']"
                   :style="{ borderTopColor: index ? '#cccccc' : '#edeeef',borderBottom: index === timeArr.length - 1 ? '1px solid #edeeef !important' : 'none' }">
                <span>
                  {{ item < 10 ? '0' + item : item }}
                </span>
              </div>
              <div :class="['board-timer','board-timer--minute', 'rb-none']" :style="{borderTopColor: index ? '#cccccc !important' : '#edeeef'}">
                <div :class="['start']">
                  <span> 00 </span>
                </div>
                <div v-if="minorUnit" :class="['start']">
                  <span> 15 </span>
                </div>
                <div :class="minorUnit ? 'start' : 'end'" >
                  <span> 30 </span>
                </div>
                <div
                  v-if="minorUnit"
                  :class="['end']"
                  :style="{ borderBottom: index === timeArr.length - 1 ? '1px solid #edeeef' : 'none' }">
                  <span> 45 </span>
                </div>
              </div>
            </div>
          </div>
          <template v-if="boardType === 'week'">
            <div v-for="(sItem, sIndex) in dayArr" class="time-cells" :key="sIndex" style="flex: 1; overflow: visible" :style="{ borderRight: sIndex === dayArr.length - 1 ? 'none' : '1px solid #e5e6e8', backgroundColor: (item < shiftStart) || (item > shiftEnd)? 'rgba(180,180,180,.2)': 'inherit', borderTop: index === 0 ? '1px solid #e5e6e8' : '1px solid #cccccc', height: minorUnit ? '72px' : '56px' }">
              <div class="cell-unit" :id="index * 2 * 2 + 1 + 'cell' + (sIndex + 1)" :style="{ height: minorUnit ? '18px' : '14px', borderBottom: minorUnit ? '1px solid #e5e6e8' : 'none'}"></div>
              <div class="cell-unit" :id="index * 2 * 2 + 2 + 'cell' + (sIndex + 1)" :style="{ height: minorUnit ? '18px' : '14px'}"></div>
              <div class="cell-unit" :id="index * 2 * 2 + 3 + 'cell' + (sIndex + 1)" :style="{ height: minorUnit ? '18px' : '14px', borderBottom: minorUnit ? '1px solid #e5e6e8' : 'none'}"></div>
              <div class="cell-unit" :id="index * 2 * 2 + 4 + 'cell' + (sIndex + 1)" :style="{ height: minorUnit ? '18px' : '14px'}"></div>
            </div>
          </template>
          <div class="board-time-box">
            <div class="board-timer-wrap right" :style="{ height: minorUnit ? '72px' : '56px'}">
              <div class="board-hour-box" :class="['board-timer', 'board-timer--hour', 'rb-none']"
                   :style="{ borderTopColor: index ? '#cccccc' : '#edeeef', borderBottom: index === timeArr.length - 1 ? '1px solid #edeeef !important' : 'none'}">
                <span>
                  {{ item < 10 ? '0' + item : item }}
                </span>
              </div>
              <div :class="['board-timer', 'board-timer--minute', 'rb-none']" :style="{borderTopColor: index ? '#cccccc !important' : '#edeeef'}">
                <div :class="['start']">
                  <span> 00 </span>
                </div>
                <div v-if="minorUnit" :class="['start']">
                  <span> 15 </span>
                </div>
                <div :class="minorUnit ? 'start' : 'end'" >
                  <span> 30 </span>
                </div>
                <div v-if="minorUnit" :class="['end']" :style="{ borderBottom: index === timeArr.length - 1 ? '1px solid #edeeef' : 'none' }">
                  <span> 45 </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="timeLineShow" class="time-line-box" :style="{ top: 'calc(' + timeLine + '% - 7px)' }">
          <div class="time-line-time-box">
            <div class="time-line-time">{{timeNow}}</div></div>
          <div class="time-line-line"></div>
          <div class="time-line-dot"></div>
        </div>
      </div>
      
    </div>
  </div>

</template>

<script lang="ts" setup>
import $ from 'jquery';
import {dateFormat, isAfterSame, objectAssignment} from './utils';
import {computed, nextTick, onBeforeMount, onBeforeUnmount, ref, watchEffect,} from 'vue';
import dayjs from 'dayjs';

const MINUTESPART = ['00', '15' , '30', '45'];
const props = defineProps({
  docId: {
    type: Number,
  },
  boardType: {
    type: String,
    default: 'week',
  },
  panelType: {
    type: String,
  },
  docPanel: {
    type: String,
  },
  docList: {
    type: Array,
  },
  sortDocList: {
    type: Array,
  },
  dateData: {
    type: String,
  },
  backColor: {
    type: Boolean,
    default: false,
  },
});
const weekFormat = 'YYYY-MM-DD';
const currentDayFull = ref('')

currentDayFull.value = dateFormat(new Date(), 'yyyy/MM/dd');
const dayArr = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
let timeArr = ref<any>([0,1,2,3,4,5,6,7,8,9,10,11,13,14,15,16,17,18,19, 20,21,22,23]);
const minorUnit = ref(false)
let shiftStart = ref(0);
let shiftEnd = ref(23);
let timeLine = ref(0);
let timeLineShow = ref(true);
let timeNow= ref('08:00');
const myBoardPanel = ref<HTMLElement>('')
function dragHandle(e: any, the?: any) {
  $(document).unbind('mouseup');
  let that = the || e.target;
  console.log(that)
  let cells = document.getElementsByClassName('cell-unit');
  if(!the) {
    for (let i = 0; i < cells.length; i += 1) {
      cells[i].innerHTML = '';
    }
  }
  let rowNum =  Number($(that).attr('id').split('cell')[0]);
  let col = Number($(that).attr('id').split('cell')[1]);
  let row = rowNum
  let firstUnitId = $(that).attr('id');
  let len = 0;
  if (!minorUnit.value) {
    row = rowNum % 2 === 0 ? rowNum - 1 : rowNum;
    firstUnitId = `${row}cell${col}`;
  }
  let moveElement:any = document.getElementById(firstUnitId);
  let forbidenMove = false;

  let day = 12// appointmentStore.currentWeekday[col - 1].split('/');
  let year =2015// appointmentStore.currentWeekDayFull[col - 1].split('/')[0];
  let starty = the ? the.getBoundingClientRect().top : e.pageY - (!minorUnit.value && rowNum % 2 === 0 ? 14 : 0);
  let startTime = '';
  $(document).mousemove((event: any) => {
    if (event.stopPropagation) {
      event.stopPropagation();
    }
    if (event.preventDefault) {
      event.preventDefault();
    }
    let deltaY = event.pageY - starty;
    len = Math.floor(deltaY / (minorUnit.value ? 18 : 14));
    if (len > 31) {
      len = 31;
    }
    if (len < -31) {
      len = -31;
    }
    let endRow = row + len + 1; // 1 + -1 + 1
    let startRow:any = row; // 1
    let endTime = '';
    if (startRow > endRow) {
      let iRow = startRow;
      startRow = endRow;
      endRow = iRow + 1;
    }
    if (!minorUnit.value) {
      endRow = endRow % 2 === 0 ? endRow + 1 : endRow
      startRow = startRow % 2 === 0 ? startRow - 1 : startRow
    }
    let start = parseInt(((startRow - 1) / 4), 10)  + timeArr.value[0];
    start = start < 10 ? `0${start}` : start;
    startTime = `${start}:${MINUTESPART[(startRow - 1) % 4]}`;

    let end = parseInt(((endRow - 1) / 4), 10)  + timeArr.value[0];
    endTime = `${end}:${MINUTESPART[(endRow - 1) % 4]}`;

    for (let i = 0; i < cells.length; i += 1) {
      cells[i].innerHTML = '';
    }
    if (forbidenMove) {
      return;
    }
    if (len >= 0) {
      moveElement = document.getElementById(firstUnitId);
      let html = `<div id="curPan" style="width: 100%;z-index:50;position: relative;background-color: #e2f1ed;height: ${(len + 1 + ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * (minorUnit.value ? 18 : 14)}px; border: 1px solid rgba(0,116,87, 0.5);padding: 5px 0">
          <div id="upHandle" class="up-handle" style="position: absolute;width: 10px;height: 10px;border-radius: 5px;z-index: 51;border: 2px solid rgba(0,116,87, 0.7);top: -6px;left: 30%;background-color: white;cursor: ns-resize"></div>
          <div style="width: 100%;height: 100%;overflow: hidden">${startTime}-${endTime} ${(Math.abs(len) + 1 + ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * 15}分钟</div>
          <div id="downHandle" style="position: absolute;width: 10px;height: 10px;border-radius: 5px;z-index: 51;border: 2px solid rgba(0,116,87, 0.7);bottom: -6px;right: 30%;background-color: white;cursor: ns-resize"></div>
        </div>`;
      if (moveElement) {
        moveElement.innerHTML = html;
      }
      $(document.getElementById('curPan')).mousedown((e: any)=>{
        e.stopPropagation()
      })
      // 上面的点位置信息
      $(document.getElementById('upHandle')).mousedown((e: any)=>{
        dragHandle(e, document.getElementById(`${row + len}cell${col}`))
      })
      // 下面的点位置信息
      $(document.getElementById('downHandle')).mousedown((e: any)=>{
        dragHandle(e, e.target.parentElement.parentElement)
      })
    } else {
      for (let i = 0; i < Math.abs(len); i += 1) {
        let newRow = row - i;
        if (i === Math.abs(len) - 1) {
          firstUnitId = `${!minorUnit.value && newRow % 2 === 0 ? newRow - 1 : newRow}cell${col}`;
        }
      }
      moveElement = document.getElementById(firstUnitId);
      let html = `<div id="curPan" style="width: 100%;z-index:50;position: relative;background-color: #e2f1ed;height: ${Math.abs(len - (!minorUnit.value ? 1 : 0) - ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * (minorUnit.value ? 18 : 14)}px; border: 1px solid rgba(0,116,87, 0.5);padding: 5px 0">
          <div id="upHandle" class="up-handle" style="position: absolute;width: 10px;height: 10px;border-radius: 5px;z-index: 51;border: 2px solid rgba(0,116,87, 0.7);top: -6px;left: 30%;background-color: white;cursor: ns-resize"></div>
          <div style="width: 100%;height: 100%;overflow: hidden">${startTime}-${endTime} ${Math.abs(len - (!minorUnit.value ? 1 : 0) - ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * 15}分钟</div>
          <div id="downHandle" style="position: absolute;width: 10px;height: 10px;border-radius: 5px;z-index: 51;border: 2px solid rgba(0,116,87, 0.7);bottom: -6px;right: 30%;background-color: white;cursor: ns-resize"></div>
        </div>`;
      if (moveElement) {
        moveElement.innerHTML = html;
      }
      $(document.getElementById('curPan')).mousedown((e: any)=>{
        e.stopPropagation()
      })
      $(document.getElementById('upHandle')).mousedown((e: any)=>{
        dragHandle(e, document.getElementById(`${row}cell${col}`))
      })
      $(document.getElementById('downHandle')).mousedown((e: any)=>{
        dragHandle(e, e.target.parentElement.parentElement)
      })
    }
  });
  // 时间比较
  function compareDay(baseVal: any, dayVal: any) {
    return !isAfterSame(baseVal, dayVal);
  }
  $(document).mouseup((e1: any) => {
    if (forbidenMove) {
      return;
    }
    let dateD = new Date(dayjs(props.dateData).format(weekFormat)).getTime() / 10000;
    let now = new Date(dayjs(new Date()).format(weekFormat)).getTime() / 10000;
    if (Math.abs(e1.pageY - starty) > 2) { // && compareDay(currentDayFull.value, appointmentStore.currentWeekDayFull[col - 1])
      if (props.boardType === 'week' ) {
        // Message.clear('top');
        // Message.warning('不可选取小于今日的时间!');
        // for (let i = 0; i < cells.length; i += 1) {
        //   cells[i].innerHTML = '';
        // }
      } else {
        let duration = (Math.abs(len) + 1 + ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * 15;
        if (len < 0) {
          duration = Math.abs(len - (!minorUnit.value ? 1 : 0) - ((!minorUnit.value && len % 2) || minorUnit.value ? 0 : 1)) * 15
        }
        let digStartTime = `${year}-${day[0]}-${day[1]} ${startTime}:00`;

        if (startTime) {
        //   appointmentStore.setAppointmentStartTime('');
        //   appointmentStore.setAppointmentStartTime(digStartTime);
        //   console.log(digStartTime)
        //   appointmentStore.setAppointmentDuration(0);
        //   appointmentStore.setAppointmentDuration(duration);
        } else {
        //   appointmentStore.setAppointmentStartTime('');
        //   appointmentStore.setAppointmentDuration(0);
        }
        
      }
    } else {
    //   appointmentStore.setAppointmentStartTime('');
    //   appointmentStore.setAppointmentDuration(0);
    //   for (let i = 0; i < cells.length; i += 1) {
    //     cells[i].innerHTML = '';
    //   }
    }
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');
  });
}
$(document).on('mousedown', '.cell-unit', function (e: any) {
  dragHandle(e)
  // console.log('----mouseDown----', e.target)

});
$(document).on('mouseover', '.cell-unit', async function (e: any) {
  // console.log('----mouseover----', e.target)

})
$(document).on('mouseleave', '.cell-unit', function (e: any) {
  // console.log('----mouseleave----', e.target)

})
onBeforeMount(() => {
  nextTick(() => {
    // 初始化滚动下降的距离
    const scrollElem = myBoardPanel.value
    console.log('----', scrollElem.scrollHeight)
    scrollElem.scrollTo({ top:  8 * 56, behavior: 'smooth' });
  })
});
onBeforeUnmount(() => {
 
});
</script>

<style lang="less">
.board-modal {
  .arco-modal-header {
    display: none;
  }

  .arco-modal-footer {
    justify-content: flex-end;
  }
}
.board-panel {
  -webkit-user-drag: element;
  &.hoving {
    border: 2px solid rgb(255, 207, 139) !important;
    cursor: ew-resize;
  }
  .circle{
    width: 10px;
    height: 10px;
    border: 2px solid rgb(255, 207, 139) !important;
    border-radius: 100%;
    position: absolute;
    cursor: ns-resize;
    display: none;
    z-index: 99;
    background-color: #FFF;
    &.pre {
      top: -5px;
      left: 10px;
    }
    &.back {
      bottom: -5px;
      right: 10px;
    }
  }
  .cursor-handle {
    position: absolute;
    height: 9px;
    left: 0;
    right: 0;
    cursor: s-resize;
    z-index: 999;
    &.top {
      top: -4px;
    }
    &.bottom {
      bottom: -4px;
    }
  }
}
.flr {
  float: right;
}
</style>

<style lang="less" scoped>
.myboard-container {
  position: relative;

  height: 100%;
  user-select: none;
  .bt-time-button {
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .time-line-box {
    width: calc(100% - 99px);
    position: absolute;
    display: flex;
    align-items: center;
    left: 49px;
    z-index: 0;

    .time-line-time-box {
      width: 27px;
      height: 14px;
      border-radius: 2.55px;
      background-color: #ff3434;
      display: flex;
      align-items: center;
      justify-content: center;

      .time-line-time {
        font-size: 18px;
        transform: scale(0.5);
        color: white;
      }
    }
    .time-line-line {
      width: calc(100% - 14px);
      height: 1px;
      background-color: red
    }
    .time-line-dot {
      width: 7px;
      height: 7px;
      border-radius: 3.5px;
      background-color: red;
    }
  }
  .board-area {
    height: calc(12 * 56px);
    border-top: none;
    overflow-y: auto;
    position: relative;

    .board-area-panel {
      position: relative;
      height: 100%;
      border-bottom: 1px solid #e5e6e8;
      overflow-y: auto;

      .board-area-panel-box {
        width: 100%;
        display: flex;
        box-sizing: border-box !important;
        overflow: visible;

        .board-time-box {
          display: flex;
          border-right: 1px solid #e5e6e8;
          width: 80px;
          min-width: 80px;
        }
      }
    }
  }
  .board-timer-wrap {
    width: 100%;
    height: 72px;
    position: relative;
    display: flex;
    flex-direction: row;
    color: #86909C;
    &.right {
      flex-direction: row-reverse;
    }
    .board-hour-box {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .board-timer {
      flex: 1;
      border: 1px solid #edeeef;
      font-size: 12px;

      &.rb-none {
        border-right: none !important;
        border-bottom: none !important;
      }
      &.lb-none {
        border-left: none;
      }

      &--hour {
      }
      &--minute {
        display: flex;
        flex-direction: column;
        .start {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          border-bottom: 1px solid #edeeef;
        }
        .end {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
        }
        span {
        }
      }
    }
  }
  .cell-unit {
    font-size: 12px;
    color: #007457;
    width: 100%;
    height: 18px;
    border-bottom: 1px solid #e5e6e8;
    cursor: pointer;
    overflow: visible;
    &.bm-none {
      border-bottom: none !important;
    }
  }
  .last-end-point {
    position: absolute;
    bottom: -6px;
    right: -8px;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

.daySelected {
  color: red;
}

.tb-body {
  border-bottom: 1px solid #e5e6e8;
  width: 100%;
  table-layout: fixed;
  :deep(.arco-btn-disabled) {
    filter: opacity(0.5);
  }
}

th {
  color: #4e5969;
}

tr {
  height: 30px;
}

td {
  height: 30px;
  color: #4e5969;
  text-align: center;
  border-top: solid 1px #e5e6e8;
  border-right: solid 1px #e5e6e8;
}

.bt-time {
  width: 80px;
  height: 40px;
}

.lastcell {
  border-right: none;
}

.div-ISelect {
  background-color: #fbd4b4;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #1d2129;
  font-size: 14px;

  .info-title {
    width: 70px;
    margin-right: 10px;
    color: #86909c;
  }
}

.status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 24px;
  font-size: 14px;
  border-radius: 1px;
}
.time-cells {
  &.disabled {
    pointer-events: none;
    cursor: default;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    background-color: rgba(180, 180, 180, 0.1);
  }
}
</style>
